<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
<style type="text/css">
		body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
		form div { margin:5px 0;}
		.int label { float:left; width:100px; text-align:right;}
		.int input { padding:1px 1px; border:1px solid #ccc;height:22px;}
		.sub { padding-left:100px;}
		.sub input { margin-right:10px; }
		.formtips{width: 200px;margin:2px;padding:2px;}
		.onError{
		    background:#FFE0E9 url(<%=basePath%>/images/img/reg3.gif) no-repeat 0 center;
			padding-left:25px;
		}
		.onSuccess{
		    background:#E9FBEB url(<%=basePath%>/images/img/reg4.gif) no-repeat 0 center;
			padding-left:25px;
		}
		.high{
		    color:red;
		}
		.focus { 
			 border: 1px solid #f00;
			 /*background: #fcc;*/
		} 
	</style>
<script type="text/javascript">
	$(function(){
			//如果是必填的，则加红星标识.
			$(":input.required").each(function(){
				var $required = $("<strong class='high'>*</strong>"); //创建元素
				$(this).parent().append($required); //然后将它追加到文档中
			});
	         //文本框失去焦点后
		    $(':input').blur(function(){
				 var $parent = $(this).parent();
				 $parent.find(".formtips").remove();
				 //验证用户名
				 if( $(this).is('#userName') ){
						if( this.value=="" || this.value.length < 6 ){
						    var errorMsg = '请输入至少6位的用户名.';
	                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
						}else{
						    //var okMsg = '输入正确.';
						    var okMsg = '';
						    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
						}
				 }
				 //验证邮件
				 if( $(this).is('#email') ){
					if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
	                      var errorMsg = '请输入正确的E-Mail地址.';
						  $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
					}else{
	                      //var okMsg = '输入正确.';
	                      var okMsg='';
						  $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
					}
				 }
			}).keyup(function(){
			   $(this).triggerHandler("blur");
			}).focus(function(){
		  	   $(this).triggerHandler("blur");
			});//end blur
			//提交，最终验证。
			 $('#send').click(function(){
					$("form:input.required").trigger('blur');
					var numError = $('form.onError').length;
					if(numError){
						return false;
					} 
					//alert("注册成功,密码已发到你的邮箱,请查收.");
			 });
			//重置
			 $('#res').click(function(){
					$(".formtips").remove(); 
			 });
	});
	//得到失去焦点
	$(function(){
		$(":input").focus(function(){
			  $(this).addClass("focus");
		}).blur(function(){
			  $(this).removeClass("focus");
		});
    });
</script>
</head>
<body>
<form:form method="post" action="add.action" commandName="user" id="form1">
   	<fieldset style="border:1px solid #eee">
		<legend style="border:1px solid #eee">创建新用户</legend>
   		<div class="int">
    		<form:label path="userName">用户名</form:label>
            <form:input path="userName" id="userName" class="required"/>
   		</div>
   		<div class="int">
    		<form:label path="email">Email</form:label>
            <form:input path="email" id="email" class="required"/>
   		</div>
   		<div class="int">
   			<form:label path="realName">真实姓名</form:label>
   			<form:input path="realName" id="realName" class="required"/>
   		</div>
   		<div class="int">
   			<form:label path="password">密码</form:label>
   			<form:input path="password" id="password" class="required"/>
   		</div>
   		<div class="int">
   			<form:label path="creatUserName">创建用户</form:label>
   			<form:input path="creatUserName" id="creatUserName" />
   		</div>
   		<div class="int">
   			<form:label path="UserType.usertypeId">用户类型</form:label>
   			<form:select path="UserType.usertypeId" items="${userType}"/>
   		</div>
   		<div class="sub">
   			<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
   		</div>
   	</fieldset>
</form:form>
<!-- 
 <form:form method="post" action="add.action" modelAttribute="user">
 	<fieldset style="border:1px solid #eee">
		<legend style="border:1px solid #eee">个人基本信息</legend>
   		<div class="int">
   			<label for="userName">userName</label>
   			<input type="text" id="userName" class="required"/>
   		</div>
   		<div class="int">
   			<label for="realName">realName</label>
   			<input type="text" id="realName" class="required"/>
   		</div>
   		<div class="int">
   			<label for="password">password</label>
   			<input type="text" id="password"/>
   		</div>
   		<div class="sub">
   			<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
   		</div>
 	</fieldset>
</form:form>
 -->
</body>
</html>